<template>
  <div class="topDiv">
    <div class="left">
      <span>{{ date }}</span>
      <span>{{ time }}</span>
    </div>
    <div class="center">寿阳县水库矩阵化管理平台</div>
    <div class="right">
      <img src="@/assets/img/sunny.png" alt="" />
      <span>26℃</span>
    </div>
    <img class="icon-home" v-if="isShow" src="@/assets/img/icon-home.png" @click="onHome" alt="" />
  </div>
</template>

<script>
export default {
  name: 'TopVue',
  data() {
    return {
      timer: null,
      time: null,
      date: null,
      isShow: false
    }
  },
  mounted() {
    this.timer = setInterval(() => this.getCurrentTime(), 1000)
  },
  watch: {
    $route(to, from) {
      if (to.path == '/') {
        this.isShow = false
      } else {
        this.isShow = true
      }
    }
  },
  methods: {
    onHome() {
      this.$router.push('/')
    },
    getCurrentTime() {
      let dateTime = new Date()
      this.time = `${dateTime.getHours() < 10 ? '0' + dateTime.getHours() : dateTime.getHours()}:${dateTime.getMinutes() < 10 ? '0' + dateTime.getMinutes() : dateTime.getMinutes()}:${
        dateTime.getSeconds() < 10 ? '0' + dateTime.getSeconds() : dateTime.getSeconds()
      }`
      this.date = `${dateTime.getFullYear()}-${dateTime.getMonth() + 1 < 10 ? '0' + (dateTime.getMonth() + 1) : dateTime.getMonth() + 1}-${
        dateTime.getDate() < 10 ? '0' + dateTime.getDate() : dateTime.getDate()
      }`
    }
  }
}
</script>

<style lang="scss" scoped>
.topDiv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10vh;
  background: url('@/assets/img/topBg.png') top no-repeat;
  background-size: 100% 115%;
  display: flex;
  justify-content: center;
  z-index: 990;
  // position: relative;
  .center {
    font-family: PangMenZhengDao;
    font-weight: 400;
    font-size: 5.3vh;
    color: #ffffff;
  }
  .left {
    position: absolute;
    top: 4vh;
    left: 16vw;
    color: #ffffff;
    span:nth-child(1) {
      font-weight: bold;
      font-size: 0.8vw;
      margin-right: 0.5vh;
    }
    span:nth-child(2) {
      font-weight: bold;
      font-size: 1.2vw;
    }
  }
  .right {
    position: absolute;
    top: 3vh;
    right: 19vw;
    color: #ffffff;
    img:nth-child(1) {
      width: 3vh;
      margin-right: 5px;
    }
    span {
      font-weight: bold;
      font-size: 1.2vw;
      position: relative;
      top: -4px;
    }
  }
  .icon-home {
    position: absolute;
    top: 1vh;
    right: 8vw;
    width: 4vh;
    cursor: pointer;
  }
}
</style>
